<template>
	<view class="add">
		<view class="title">
			<image :src="'http://localhost:8888/getImg?sort='+addgood.img" class="img"></image>
			<view class="tit">
				<view style="color: rgb(226,96,31);">￥239</view>
				<view>库存{{addgood.stock}}件</view>
				<view style="color: rgb(226,96,31);">请选择 颜色 尺码</view>
			</view>
		</view>
		<view class="act">*使用10公里徒步里程可减100元，到手价为139</view>
		<view class="color">
			<text>颜色</text>
			<view class="colorCla">
				<view v-for="(v,i) in colorCla" @click="selectCol(i)" :class="v.selected?'select':''">{{v.col}}</view>
			</view>
		</view>
		<view class="size">
			<text>尺码</text>
			<view class="sizeNum">
				<view v-for="(v,i) in sizeNum" @click="selectSize(i)" :class="v.selected?'select':''">{{v.size}}</view>
			</view>
		</view>
		<view class="num">
			<text>购买数量</text>
			<view class="exitNum">
				<view @click="cut">-</view>
				<view>{{addCart.addNum}}</view>
				<view @click="add">+</view>
			</view>
		</view>
		<view class="addCart" @click="addCartGood(addgood)">
			加入购物车
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted} from 'vue';
	import http from '../../until/http';
	
	export default {
		setup(){
			let data=reactive({
				addCart:{addNum:1,addCla:'',addSize:''},
				colorCla:[{col:'红色',selected:false},{col:'蓝色',selected:false},{col:'白色',selected:false}],
				sizeNum:[{size:'M',selected:false},{size:'L',selected:false},{size:'XL',selected:false},{size:'XXL',selected:false},{size:'XXXL',selected:false}],
				cut:()=>{
					if(data.addCart.addNum>1){
						data.addCart.addNum--
					}
				},
				add:()=>{
					if(data.addCart.addNum<9){
						data.addCart.addNum++
					}
				},
				selectCol:(i)=>{
					data.colorCla.forEach((item)=>{
						item.selected=false;
					})
					data.colorCla[i].selected=true;
					data.addCart.addCla=data.colorCla[i].col;
				},
				selectSize:(i)=>{
					data.sizeNum.forEach((item)=>{
						item.selected=false;
					})
					data.sizeNum[i].selected=true;
					data.addCart.addSize=data.sizeNum[i].size;
				},
				addCartGood:(addgood)=>{
					if(data.addCart.addCla==''){
						 uni.showToast({
						 	title:'请选择颜色',
							icon:'error'
						 })
					}else if(data.addCart.addSize==''){
						uni.showToast({
							title:'请选择尺寸',
							icon:'error'
						})
					}else{
						data.addCart.goodid=addgood.id;
						http({
							url:'/goods/addcart',
							method:'post',
							data:data.addCart
						}).then((res)=>{
							if(res.data.code==200){
								uni.showToast({
									title:'加购成功',
								});
								location.reload();
							}else{
								uni.showToast({
									title:'加购失败，请稍后再试',
									icon:'error'
								})
							}
						})
					}
				}
			})
			return {...toRefs(data)}
		},
		props:['addgood']
	}
</script>

<style lang="less" scoped>
	.add{
		width: 750rpx;
		height: 800rpx;
		background-color: white;
		position: relative;
	}
	.title{
		width: 750rpx;
		height: 200rpx;
		position: relative;
	}
	.img{
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top:-40rpx;
		left: 20rpx;
	}
	.tit{
		margin-left: 240rpx;
		height: 160rpx;
		display: flex;
		flex-direction:column;
		justify-content:center;
		view{
			font-size: 14px;
			line-height: 40rpx;
		}
	}
	.act{
		font-size: 14px;
		color: rgb(226,96,31);
		margin-left: 20rpx;
	}
	.color,
	.size{
		margin: 20rpx;	
	}
	.colorCla,
	.sizeNum{
		display: flex;
		flex-wrap:wrap;
		view{
			height: 50rpx;
			padding: 0 50rpx;
			line-height: 50rpx;
			margin: 15rpx;
			border: 1px solid rgb(242,242,242);
			background-color: rgb(242,242,242);
			text-align: center;
			font-size: 14px;
		}
	}
	.num{
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}
	.exitNum{
		display: flex;
		view{
			width: 60rpx;
			border: 1px solid rgb(242,242,242);
			text-align: center;
		}
		view:nth-child(2){
			width: 100rpx;
			font-size: 14px;
		}
		
	}
	.addCart{
		width: 750rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		position: absolute;
		bottom: 0;
		background-color: rgb(226,96,31);
		color: white;
	}
	.select{
		border: 1px solid rgb(226,96,31) !important;
		color: rgb(226,96,31);
		background-color: white !important;
	}
</style>
